﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SurveyLogin.aspx.cs" Inherits="SurveyLogin" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--For IE SignalR相容性-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Survey Login</title>
    <link rel="stylesheet" href="css/default.css">
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-1.2.1.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <!--Reference the QR code generator script. -->
    <script src="Scripts/jquery.qrcode-0.7.0.min.js"></script>
    <!--Add script to update the page and send messages.-->
    <script src="Scripts/jquery.query-object.js" type="text/javascript"></script>
    <script>
        $(function () {
            // Declare a proxy to reference the hub. 
            var chat = $.connection.loginHub;

            //從後端取得Connection ID
            chat.client.GetConnectionID = function (connectionId) {
                $('#cid_lb').html(connectionId);

                //產生QR code
                $("#code").qrcode({
                    render: 'image', //image方式 
                    size: '250',
                    //fill: '#87000D',
                    text: '@CMD_SERVICE_ID=LoginSurvey&cid=' + connectionId
                    //text: connectionId + ',' + $('span#sid_lb').html() // [ConnectionID, SessionID]
                });
            };

            //登入成功 > 跳轉頁面
            chat.client.GetRedirect = function (url) {
                window.location.replace(url);
            };

            //接收Server端送來的訊息
            chat.client.GetMessage = function (message) {

                // Html encode display message. 
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page. 
                $('#discussion').append('<li>' + encodedMsg + '</li>');

                //接收到的訊息格式:
                //[cid, sip, pps_code, custom_name, user_dir]
                var temp = message.split(",");
                var cid = temp[0];
                var sip = temp[1];
                var pps_code = temp[2];
                var custom_name = temp[3];
                var user_dir = temp[4];

                //如果接收到的訊息cid是自己
                if (cid === $('#cid_lb').html()) {

                    //進行登入認證
                    $.ajax({
                        type: "POST",
                        url: "Login.ashx",
                        datatypr: "text",
                        data: "SIP_NUMBER=" + sip + "&PPS_CODE=" + pps_code + "&CUSTOM_NAME=" + custom_name + "&USER_DIR=" + user_dir,
                        success: function (response) {

                            //接收到的訊息格式:
                            //[return_status, sip_number, time_stamp, custom_name, user_dir]
                            var temp = response.split(",");
                            var return_status = temp[0];
                            var sip_number = temp[1];
                            var time_stamp = temp[2];
                            var custom_name = temp[3];
                            var user_dir = temp[4];
                            var survey_id = $.query.get('cieudsj6d');

                            if (return_status === 'ok') {
                                //跳轉頁面
                                chat.server.sendRedirect(sip_number, time_stamp, custom_name, user_dir, survey_id);
                            }
                        },
                        error: function () {
                            alert("登入失敗！")
                        }
                        //beforeSend: //可加入 "登入中" 提示
                    })
                }
            };

            // Set initial focus to message input box.  
            $('#message').focus();

            // Start the connection.
            $.connection.hub.start().done(function () {

                //呼叫後端傳送ConnectionID到前端
                chat.server.sendConnectionId();

                //按下send按鈕時的事件
                $('#sendmessage').click(function () {

                    // Call the Send method on the hub.
                    chat.server.sendMessage($('#message').val());

                    // Clear text box and reset focus for next comment. 
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</head>
<body>
    <div id="header">
        <div id="headerLogoCenter">
            <br>
        </div>
    </div>
    <div id="contentHome">
        <form id="form1" runat="server">
        <!--Message欄位-->
        <div id="containerDiv">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <input type="hidden" id="displayname" />
            <ul id="discussion">
            </ul>
        </div>
        <div id="hiddenDiv">
            <p>
                Connection ID :&nbsp;
                <asp:Label ID="cid_lb" runat="server"></asp:Label>
            </p>
            <p>
                Service ID :&nbsp;
                <asp:Label ID="sid_lb" runat="server">LoginSurvey</asp:Label>
            </p>
        </div>
        <br>
        <br>
        <!--QR code貼圖位置-->
        <div id="centerDiv">
            <asp:Image ID="LogoImage" runat="server" ImageUrl="~/Images/logo.png" Width="150px" />
        <br>
            <div id="code" class="Center">
            </div>
            <font class="largeFont">
            <br />
            Please log in using  </font>
            <font class="largeFontRed">iSender</font>
            <font class="largeFont">scan</font>
            <br />
            <br />
            <br />
        </div>
        </form>
    </div>
    <div id="footer">
        <font class="footerFont">iSender | CCP Group © 2014</font>
    </div>
</body>
</html>
